<template>
  <el-row>
    <el-col
      v-for="item in echartsNumber"
      :key="'echarts'+item"
      :span="12"
    >
      执行函数：setEchartsOptions{{item}}
      <div :ref="'echarts'+item" class="echars">
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {EchartsUtils} from "@localModules/ZhiXinLib/utils/EchartsUtils/index";

export default {
  name: "index",
  data() {
    return {
      echartsNumber: 0,
    }
  },
  mounted() {
    Object.keys(this).forEach(i => {
      if (i.startsWith('setEchartsOptions')) {
        this.echartsNumber++
      }
    })
    this.$nextTick(()=>{
      for (let i = 1; i <= this.echartsNumber; i++) {
        this['setEchartsOptions'+i]()
      }
    })
  },
  methods:{
    setEchartsOptions1() {
      let seriesData = [
        {
          "value": 546.168,
          "name": "AK-13",
          "radio": 3.12
        },
        {
          "value": 522.817,
          "name": "AC-13",
          "radio": 2.99
        },
        {
          "value": 185.99,
          "name": "水泥混凝土",
          "radio": 1.06
        }
      ]
      EchartsUtils.bie1({
        el: this.$refs.echarts1[0],
        seriesData,
        titleShow:true,
        titleText: '各部门服务订阅占比'
      })
    },
    setEchartsOptions2() {
      let seriesData = [
        {
          "value": 546.168,
          "name": "AK-13",
          "radio": 3.12
        },
        {
          "value": 522.817,
          "name": "AC-13",
          "radio": 2.99
        },
        {
          "value": 185.99,
          "name": "水泥混凝土",
          "radio": 1.06
        }
      ]
      EchartsUtils.bie1({
        el: this.$refs.echarts2[0],
        seriesData,
        showLegend:false
      })
    },
    setEchartsOptions3() {
      let seriesData = [
        {
          "value": 546.168,
          "name": "AK-13",
          "radio": 3.12
        },
        {
          "value": 522.817,
          "name": "AC-13",
          "radio": 2.99
        },
        {
          "value": 185.99,
          "name": "水泥混凝土",
          "radio": 1.06
        }
      ]
      EchartsUtils.bie1({
        el: this.$refs.echarts3[0],
        seriesData,
        showLegend:true
      })
    },
    setEchartsOptions4() {
      let seriesData = [
        {
          name: "1月",
          value1: 13512,
          value2: 0,
          value3: 0,
        },
        {
          name: "2月",
          value1: 9806,
          value2: 0,
          value3: 0,
        },
        {
          name: "3月",
          value1: 19727,
          value2: 0,
          value3: 0,
        },
        {
          name: "4月",
          value1: 17046,
          value2: 12689,
          value3: 7479
        },
        {
          name: "5月",
          value1: 17780,
          value2: 13396,
          value3: 6355
        },
        {
          name: "6月",
          value1: 19359,
          value2: 13220,
          value3: 5940,
        },
        {
          name: "7月",
          value1: 16229,
          value2: 11836,
          value3: 10234,
        },
        {
          name: "8月",
          value1: 18176,
          value2: 13478,
          value3: 10755,
        },
        {
          name: "9月",
          value1: 18515,
          value2: 12911,
          value3: 9806,
        },
        {
          name: "10月",
          value1: 13658,
          value2: 9479,
          value3: 8613,
        },
        {
          name: "11月",
          value1: 16364,
          value2: 10839,
          value3: 8826,
        },
        {
          name: "12月",
          value1: 13973,
          value2: 8816,
          value3: 7291,
        }
      ];
      let legendItem = ['各部门服务订阅占比','各部门服务调用占比','第三个折线图'];
      EchartsUtils.line1({
        el: this.$refs.echarts4[0],
        seriesData,
        legendItem,
        formatter:function(params){
          const label = params?.[0]?.axisValueLabel
          let html = label + '<br/>';
          params.forEach(v=>{
            html+= v.marker+v.seriesName+'：<span style="float:right">'+v.value+'</span><br/>'
          })
          return html
        }
      })
    },
    setEchartsOptions5() {
      let seriesData = [
        {
          name: "1月",
          value1: 13512,
          value2: 0,
          value3: 0,
        },
        {
          name: "2月",
          value1: 9806,
          value2: 0,
          value3: 0,
        },
        {
          name: "3月",
          value1: 19727,
          value2: 0,
          value3: 0,
        },
        {
          name: "4月",
          value1: 17046,
          value2: 12689,
          value3: 7479
        },
        {
          name: "5月",
          value1: 17780,
          value2: 13396,
          value3: 6355
        },
        {
          name: "6月",
          value1: 19359,
          value2: 13220,
          value3: 5940,
        },
        {
          name: "7月",
          value1: 16229,
          value2: 11836,
          value3: 10234,
        },
        {
          name: "8月",
          value1: 18176,
          value2: 13478,
          value3: 10755,
        },
        {
          name: "9月",
          value1: 18515,
          value2: 12911,
          value3: 9806,
        },
        {
          name: "10月",
          value1: 13658,
          value2: 9479,
          value3: 8613,
        },
        {
          name: "11月",
          value1: 16364,
          value2: 10839,
          value3: 8826,
        },
        {
          name: "12月",
          value1: 13973,
          value2: 8816,
          value3: 7291,
        }
      ];
      let legendItem = ['各部门服务订阅占比','各部门服务调用占比'];
      EchartsUtils.line1({
        el: this.$refs.echarts5[0],
        seriesData,
        legendItem,
        yAxisName: '55',
        formatter:function(params){
          const label = params?.[0]?.axisValueLabel
          let html = label + '<br/>';
          params.forEach(v=>{
            html+= v.marker+v.seriesName+'：<span style="float:right">'+v.value+'</span><br/>'
          })
          return html
        }
      })
    },
    setEchartsOptions6() {
      let seriesData = [
        {
          name: "1月",
          value1: 13512,
          value2: 0,
          value3: 0,
        },
        {
          name: "2月",
          value1: 9806,
          value2: 0,
          value3: 0,
        },
        {
          name: "3月",
          value1: 19727,
          value2: 0,
          value3: 0,
        },
        {
          name: "4月",
          value1: 17046,
          value2: 12689,
          value3: 7479
        },
        {
          name: "5月",
          value1: 17780,
          value2: 13396,
          value3: 6355
        },
        {
          name: "6月",
          value1: 19359,
          value2: 13220,
          value3: 5940,
        },
        {
          name: "7月",
          value1: 16229,
          value2: 11836,
          value3: 10234,
        },
        {
          name: "8月",
          value1: 18176,
          value2: 13478,
          value3: 10755,
        },
        {
          name: "9月",
          value1: 18515,
          value2: 12911,
          value3: 9806,
        },
        {
          name: "10月",
          value1: 13658,
          value2: 9479,
          value3: 8613,
        },
        {
          name: "11月",
          value1: 16364,
          value2: 10839,
          value3: 8826,
        },
        {
          name: "12月",
          value1: 13973,
          value2: 8816,
          value3: 7291,
        }
      ];
      let legendItem = ['库表交换量'];
      EchartsUtils.line1({
        el: this.$refs.echarts6[0],
        showLegend:false,
        yAxisNameAppend: '条',
        seriesData,
        legendItem,
        formatter:function(params){
          const label = params?.[0]?.axisValueLabel
          let html = label + '<br/>';
          params.forEach(v=>{
            html+= v.marker+' <span style="float:right">'+v.value+'条</span><br/>'
          })
          return html
        }
      })
    },
    setEchartsOptions7() {
      let seriesData = [
        {
          name: "1月",
          value1: 1,
          value2: 0,
          value3: 0,
          value4: 4,
        },
        {
          name: "2月",
          value1: 2,
          value2: 0,
          value3: 0,
          value4: 4,
        },
        {
          name: "3月",
          value1: 3,
          value2: 0,
          value3: 0,
          value4: 4,
        },
        {
          name: "4月",
          value1: 4,
          value2: 5,
          value3: 6,
          value4: 6,
        },
      ];
      let legendItem = ['实际接受服务','持续接受服务','完成两次面对面服务','第4条'];
      EchartsUtils.bar1({
        el: this.$refs.echarts7[0],
        seriesData,
        legendItem,
        yAxisName: '次数',
        xAxisName: '日',
        formatter:function(params){
          const label = params?.[0]?.axisValueLabel
          let html = label + '<br/>';
          params.forEach(v=>{
            html+= v.marker+v.seriesName+'：<span style="float:right">'+v.value+'</span><br/>'
          })
          return html
        }
      })
    },
    setEchartsOptions8() {
      let seriesData = [
        {
          name: "1月",
          value1: 13512,
          value2: 0,
          value3: 0,
        },
        {
          name: "2月",
          value1: 9806,
          value2: 0,
          value3: 0,
        },
        {
          name: "3月",
          value1: 19727,
          value2: 0,
          value3: 0,
        },
        {
          name: "4月",
          value1: 17046,
          value2: 12689,
          value3: 7479
        },
        {
          name: "5月",
          value1: 17780,
          value2: 13396,
          value3: 6355
        },
        {
          name: "6月",
          value1: 19359,
          value2: 13220,
          value3: 5940,
        },
        {
          name: "7月",
          value1: 16229,
          value2: 11836,
          value3: 10234,
        },
        {
          name: "8月",
          value1: 18176,
          value2: 13478,
          value3: 10755,
        },
        {
          name: "9月",
          value1: 18515,
          value2: 12911,
          value3: 9806,
        },
        {
          name: "10月",
          value1: 13658,
          value2: 9479,
          value3: 8613,
        },
        {
          name: "11月",
          value1: 16364,
          value2: 10839,
          value3: 8826,
        },
        {
          name: "12月",
          value1: 13973,
          value2: 8816,
          value3: 7291,
        }
      ];
      EchartsUtils.barAndLine1({
        el: this.$refs.echarts8[0],
        seriesData,
        yAxisName: '数量',
        yAxisNameAppend: '个',
        yAxisName2: '环比率',
        yAxisNameAppend2: '%',
        legendItem: ['数量', '环比率', '同比率'],
        indexBar: 1,
        formatter: ''
      })
    },
  }
}
</script>

<style scoped lang="scss">
.echars{
  height: 400px;
  width: 100%;
}
</style>
